<script lang="ts" setup>
import {
  ElMessageBox,
  ElDialog,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  ElSelect,
  ElOption,
  ElSwitch,
} from "element-plus";
import { nextTick, reactive, ref } from "vue";
// import {
//   add,
//   edit,
//   getOrganizationById,
//   getOrganizationsByUserId,
// } from "#/api/sys/organization";

const dialogVisible = ref(false);
const title = ref("分享");

const spaceInput = (field: string, value: string) => {
  // 过滤空格
  ruleForm[field] = value.replace(/\s+/g, "");
};

const openDialog = () => {
  dialogVisible.value = true;
  setTimeout(() => {
    resetForm();
  }, 0);
};

defineExpose({ openDialog });
// const emit = defineEmits(["search"]);

const ruleForm = reactive<RuleForm>({
  id: "",
  status: true,
  expireAt: "",
  password: false,
  link: "",
});
const ruleFormRef = ref();

const rules = reactive({
  link: [
    {
      validator: (rule: any, value: string, callback: any) => {
        if (value && value.length > 200) {
          callback(new Error("请输入最多200个字符"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
});
const statusOptions = [
  {
    value: "30",
    label: "30天",
  },
  {
    value: "7",
    label: "7天",
  },
  {
    value: "1",
    label: "1天",
  },
];

const loading = ref(false);

const getDetail = async (id) => {
  const params = {
    id: id,
  };
  //   const { data } = await getOrganizationById(params);
  //   ruleForm.organizationName = data.organizationName;
  //   ruleForm.parentId = data.parentId;
  //   ruleForm.status = data.status + "";
  //   ruleForm.sort = data.sort;
  //   ruleForm.chargeName = data.chargeName;
};

const submitForm = async (isEdit = false) => {
  if (loading.value) return;

  try {
    loading.value = true;
    await ruleFormRef.value?.validate();

    const params = {
      id: ruleForm.id,
      status: ruleForm.status,
      expireAt: ruleForm.expireAt,
      password: ruleForm.password,
      link: ruleForm.link,
    };
    // const { code, msg } = await edit(params);
    // if (code === 200) handleApiResponse(isEdit);
    // else ElMessage.error("操作失败," + msg);
  } catch (error) {
    ElMessage.error("操作失败");
  } finally {
    loading.value = false;
  }
};

const resetForm = () => {
  if (
    ruleFormRef.value &&
    typeof ruleFormRef.value.resetFields === "function"
  ) {
    ruleFormRef.value.resetFields();
  } else {
    // 如果无法重置表单，则手动重置数据
    Object.assign(ruleForm, {
      id: "",
      status: true,
      expireAt: "",
      password: false,
      link: "",
    });
  }
};

const handleClose = (done: () => void) => {
  dialogVisible.value = false;
};
</script>

<template>
  <div class="page">
    <ElDialog
      v-model="dialogVisible"
      :title="title"
      width="600px"
      :before-close="handleClose"
    >
      <div>
        <div class="tips">
          <img
            src="/static/tip.png"
            alt=""
            style="width: 22px; height: 22px; margin-right: 8px"
          />
          <p>
            开启分享后，不论你是否平台成员都可通过手机、平板或web页面扫码直接查看此媒体文件
          </p>
        </div>
        <ElForm
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
        >
          <ElFormItem label="媒体分享：" prop="status">
            <ElSwitch
              v-model="ruleForm.status"
              style="
                --el-switch-on-color: #2f69eb;
                --el-switch-off-color: #c0c4cc;
              "
            />
          </ElFormItem>
          <ElFormItem label="有效期：" prop="expireAt">
            <ElSelect v-model="ruleForm.expireAt" placeholder="请选择">
              <ElOption
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="分享密码：" prop="password">
            <ElSwitch
              v-model="ruleForm.password"
              style="
                --el-switch-on-color: #2f69eb;
                --el-switch-off-color: #c0c4cc;
              "
            />
          </ElFormItem>
          <ElFormItem label="分享链接：" prop="link">
            <div class="link-box">
              <ElInput
                v-model="ruleForm.link"
                placeholder="请输入分享链接"
                style="width: 420px"
                disabled
                @input="(value) => spaceInput('link', value)"
              />
              <ElButton type="primary" style="margin-left: 12px"
                >复制分享链接</ElButton
              >
            </div>
          </ElFormItem>
        </ElForm>
        <div class="codeList">
          <img
            src="/static/tip.png"
            alt=""
            style="width: 120px; height: 120px; margin-right: 20px"
          />
          <div v-if="ruleForm.status == true">
            <p>本二维码有效期至2025-08-11 09:33:22</p>
            <p>扫码即可查看媒体分享</p>
          </div>
          <div v-else>
            <p>已关闭媒体分享，当前分享功能未开启</p>
            <p>扫码无法访问内容，若需启用可打开【媒体分享】</p>
            <p>二维码重新生效</p>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <ElButton @click="resetForm" :disabled="loading">取消</ElButton>
          <ElButton type="primary" @click="submitForm()" :loading="loading">
            确定
          </ElButton>
        </div>
      </template>
    </ElDialog>
  </div>
</template>

<style scoped>
:deep(.el-input-number .el-input__inner) {
  text-align: left !important;
}

.tips {
  background: #fdf6ed;
  border-radius: 1px;
  font-weight: 500;
  font-size: 12px;
  color: #faad14;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 0 10px 12px;
}

.codeList {
  background: #f0f2f5;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  font-size: 12px;
  color: #606266;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 28px 0px 28px 24px;
}

.codeList p {
  margin-bottom: 8px;
}

.link-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

:deep(.el-input__wrapper) {
  background-color: #fff !important;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base)) !important;
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset !important;
  font-size: 14px !important;
}
</style>